<template>
  <view class="index">
    <!-- <view class="custom c_yellow" :style="'top:' + customTop + 'px'">
      <text>商品</text>
    </view> -->
    <view class="main">
      <view class="header">
        <view @click="search" class="search-box">
          <text>搜索商品</text>
          <text class="search-icon">搜索</text>
        </view>
      </view>
    </view>

      <view class="tab_box dis_f_l_c p_a_20 " >
          <view class="" v-for="(item,index) in typeList" :key="index" @click="handleTabChange(index)">
              <view class="tab_item m_r_20 dis_f_co_c_c">
                  <image class="img_box" :src="item.url" :style="{borderColor:index==activeIndex?'#FBAD02':'#ccc'}"></image>
                  <view class="f_s_14 m_t_5 over1" :style="{color:index==activeIndex?'#FBAD02':'#fff'}">{{item.configName}}</view>
              </view>
          </view>
      </view>

    <view class="goods">
      <view class="goodsType m_r_20">
        <scroll-view :scroll-top="scrollTop" scroll-y="true">
          <view v-for="(item,index) in twoList" :key="index" class="typeDiv" :class="{ active: activeTwoIndex == index }" @click="changeType(index)">
            <text>{{item}}</text>
          </view>
        </scroll-view>
      </view>
      <view class="main-box">
<!--        <view class="order">
          <view>推荐</view>
          <view class="order-sort">
            <view @click="handleSort('create_time')">时间</view>
            <view class="ml-4" @click="handleSort('price')">价格</view>
          </view>
        </view>-->
        <view class="goodsList" v-if="goodsList.length > 0">
          <view class="goodsItem c_f" v-for="(item,index) in goodsList" :key="index">
            <view @click="goInfo(item.goodsId)">
              <u-image :showLoading="true" :src="item.urlLink" width="180rpx" height="180rpx" radius="10rpx"></u-image>
            </view>
            <view class="goodsInfo">
              <text style="font-weight: 700;font-size:30rpx" class="wordLimit" @click="goInfo(item.goodsId)">{{item.name}}</text>
<!--              <view class="shop-name" @click="goInfo(item.goodsId)">-->
<!--                <u&#45;&#45;image :src="item.userProfile" shape="circle" width="40rpx" height="40rpx" v-if="item.userProfile"></u&#45;&#45;image>-->
<!--                <u&#45;&#45;image src="/static/img/avatar.png" shape="circle" width="40rpx" height="40rpx" v-else></u&#45;&#45;image>-->
<!--                <view class="ml-2 c_f">{{item.userName}}</view>-->
<!--              </view>-->
              <view class="goodsBottom">
                <view class="money" @click="goInfo(item.goodsId)">
                  <view style="font-weight: 700;">
                    <text style="font-size: 20rpx;">¥ </text>
                    {{item.price}}
                  </view>
                </view>
                <u-image :showLoading="true" src="/static/img/shopping-car.png" width="50rpx" height="50rpx" @click="addCart(item.goodsId)"></u-image>
              </view>
            </view>
          </view>
        </view>
        <s-empty v-else />
      </view>
    </view>
  </view>
</template>

<script>
import {
  getGoodsListApi,
  getByKeyApi,
  addCartApi,
  getUnReadApi,
} from "@/sheep/api/index";
export default {
  data() {
    return {
      timer: null,
      keyword: "",
      goodsList: [],
        twoList: [],
      titleHeight: 0,
      customTop: 0,
      typeList: [],
      activeIndex: 0,
        activeTwoIndex: 0,
      query: {
        type: "",
        // status: "3",
        orderByColumn: "",
        isAsc: "desc",
      },
      cartForm: {
        goodsId: null,
        isAdd: 1,
      },
    };
  },
  onLoad(options) {
    this.getHeight();
	const index = getApp().globalData.curType;
	this.activeIndex = index;
	this.getTypeList();
  },
  onShow() {

    // this.getSetTimeNumber();
  },
  onHide() {
    // 清除定时器
    // clearInterval(this.timer);
  },
  methods: {
    /** 循环请求消息接口 */
    async getMessage() {
      let res = await getUnReadApi();
      if (res.data) {
        uni.showTabBarRedDot({
          index: 3,
        });
        // 清除定时器
        clearInterval(this.timer);
      } else {
        // 清空红点
        uni.hideTabBarRedDot({
          index: 3,
        });
      }
    },
    /** 延时器时间 */
    async getSetTimeNumber() {
      let res = await getByKeyApi("chat");
      let setTimeNumber = res.data[0].configValue;
      //定时3秒刷新一次未读消息
      let that = this;
      this.timer = setInterval(() => {
        that.getMessage();
      }, setTimeNumber);
    },
      handleTabChange(index){
          this.activeIndex=index
          this.activeTwoIndex = 0
          this.twoList  = this.typeList[index].remark
          this.getGoodsList()
      },
    getGoodsList() {
      this.query.oneType = this.typeList[this.activeIndex].configName;
      this.query.type = this.twoList[this.activeTwoIndex];
        getGoodsListApi(this.query).then((res) => {
        this.goodsList = res.rows;
      });
    },
    addCart(goodsId) {
      this.cartForm.goodsMallId = goodsId;
      addCartApi(this.cartForm).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "加入购物车成功",
            icon: "none",
          });
        }
      });
    },
    handleSort(orderByColumn) {
      if (this.query.orderByColumn == orderByColumn) {
        this.query.isAsc = this.query.isAsc == "desc" ? "asc" : "desc";
      } else {
        this.query.orderByColumn = orderByColumn;
        this.query.isAsc = "desc";
      }
      this.getGoodsList();
    },
    // 获取微信右上角胶囊高度
    getHeight() {
      let res = uni.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top + res.height + 16;
      this.customTop = res.top + 3;
    },
    search() {
      uni.navigateTo({
        url: "/pages/index/search",
      });
    },
    goInfo(goodsId) {
      uni.navigateTo({
        url: "/pages/index/info?goodsId=" + goodsId,
      });
    },
    changeType(index) {
      this.activeTwoIndex = index;
      this.getGoodsList();
    },
    async getTypeList() {
      let res = await getByKeyApi("goods_type");
      this.typeList = res.data;
        for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].remark != ""){
                this.typeList[i].remark = res.data[i].remark.split("-");
            }
        }
        if (this.typeList[0].remark){
            this.twoList = res.data[0].remark;
        }
        this.getGoodsList();
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  min-height: 100vh;
  background: #222020;
  .custom {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 40rpx;
    font-weight: bolder;
    display: flex;
    align-items: center;
  }
  .main {
    padding: 0 10rpx;
    .header {
      display: flex;
      padding: 42rpx 0;
      color: #fff;
      justify-content: space-between;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        //background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/indexbg.png")
        //  no-repeat;
        //background-size: 100% auto;
          background: #222020;
        z-index: -2;
      }
      .search-box {
        // background-color: #fff;
        border: #fff 1rpx solid;
        border-radius: 40rpx;
        width: 100%;
        height: 70rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5rpx 0 30rpx;
        color: #fff;
        font-size: 26rpx;
        .search-icon {
          background-color: #fff;
          border-radius: 40rpx;
          color: #000;
          height: 60rpx;
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .goods {
    height: calc(100vh - 160rpx);
    //background-color: #fff;
    // border-radius: 10rpx 10rpx 0 0;
    // margin-top: -10rpx;
    display: flex;
    .goodsType {
      flex: 1;
      // background: rebeccapurple;
      //background: #f4f5f7;
      overflow: auto;
      color: #666;
      font-size: 24rpx;
      font-weight: 700;
      .typeDiv {
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        background-color: #000;
        font-weight: 900;
          color: #fff;
          border-top-right-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
      }
    }
    .main-box {
      flex: 3;
      height: calc(100% - 80rpx - 60rpx);
      .order {
        display: flex;
        justify-content: space-between;
        color: #999;
        padding: 0 16rpx;
        line-height: 100rpx;
        font-size: 24rpx;
        font-weight: 700;
        .order-sort {
          display: flex;
        }
      }
      .goodsList {
        flex: 1;
        height: 100%;
        overflow: auto;
        .goodsItem {
          padding: 15rpx 30rpx;
          display: flex;
            background-color: #000;
            margin-bottom:20rpx;
            border-radius: 20rpx;
          .goodsInfo {
            flex: 1;
            padding: 0 0 0 15rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .wordLimit {
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              /* 设置最大显示行数 */
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
            }
            .goodsBottom {
              display: flex;
              justify-content: space-between;
              .money {
                color: #EB6121;
                margin-top: 8rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
              }
            }
            .shop-name {
              margin-top: 10rpx;
              font-size: 24rpx;
              //color: #999;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
.img_box{
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border:8rpx solid #ccc;
}
.tab_box{
    overflow-x: auto;
}
</style>
